<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline"  >
        <el-form class="demo" >
            <el-form-item label="条件查询">
                <el-input
                    v-model="formInline.user"
                    placeholder="产品类型"
                ></el-input>
            </el-form-item>
            <el-form id="zhang">
                <el-button type="primary" @click="Grabble">查询</el-button>
                <el-button @click="add">添加</el-button>
            </el-form>
        </el-form>

        <el-form-item>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column fixed prop="name" label="产品类型" width="150" >
                </el-table-column>
                <el-table-column prop="payType" label="缴费类型" width="120">
                </el-table-column>
                <el-table-column
                    prop="suitableFor"
                    label="适应人群"
                    width="120"
                >
                </el-table-column>

                <!--:formatter="formatBoolean" -->

                <el-table-column
                    prop="renew"
                    label="可否续保"
                    width="120"
                    :formatter="formatBoolean"
                >
                    <!-- <template slot-scope="scope"> 
                      <span>{{scope.row.renew}}</span>
                  </template> -->
                </el-table-column>

                <el-table-column label="保单形式" width="200">
                    <template slot-scope="scope">
                        <span v-for="item in scope.row.policy" :key="item"
                            >{{ item }}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="价格" width="120">
                </el-table-column>

                <el-table-column label="图片" width="120">
                    <template slot-scope="scope">
                        <img
                            :src="
                                'http://localhost:3000/images/' +
                                scope.row.imageUrl
                            "
                            alt=""
                            width="60px"
                            height="60px"
                        />
                    </template>
                </el-table-column>

                <el-table-column prop="value.name" label="保险类别" width="120">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            @click="handleClick(scope.row._id)"
                            type="text"
                            size="small"
                            >修改</el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            :index="scope.row._id"
                            @click="DeleteBtnInsures(scope.row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[3, 5, 8, 10]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </el-form>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            pageSize:3,
            currentPage:1,
            total:0,
            formInline: {
                user: "",
                region: "",
            },

            tableData: [],
              
            //   分页去往的页数
            currentPage1: 1,
            // currentPage2: 5,
            // currentPage3: 5,
            // currentPage4: 1,
        };
    },
    methods: {
       
         handleClick(id) {
    
          this.$router.push("/System/Modification/"+id);
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize=val;
             this.getinsures();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage=val;
             this.getinsures();
        },
        add() {
            this.$router.push("/System/AddInsuresList");
        },

        //是或否的方法
        formatBoolean: function (row, column, cellValue) {
            var ret = ""; //你想在页面展示的值
            if (cellValue) {
                ret = "是"; //根据自己的需求设定
            } else {
                ret = "否";
            }
            return ret;
        },

        // 发送请求
        async getinsures() {
            const { data } = await axios({
                url: "/insures/getInsures",
                method: "get",
                params: {
                    // 条数
                    pageSize:this.pageSize,
                    currentPage:this.currentPage,

                    inputs: this.formInline.user,
                },
            });
            console.log(data);
            if (data.code) {
                this.tableData = data.data.getInsures;
                 this.total = data.data.totals;       
            }
        },
  
        // 发送删除的请求
        async DeleteBtnInsures(id) {
            console.log(id);
            const { data } = await axios({
                url: "/insures/deleteInsuresById",
                method: "post",
                data: { id },
            });
            console.log(data);
            if (data.code) {
                this.getinsures();
            }
        },

        // 搜索功能
        Grabble() {
            this.getinsures();
        },
    },

    // 调用
    mounted() {
        this.getinsures();
    },
};
</script>

<style>

  .demo { 
    width: 100%;
    display: flex;
    margin: 10px;
}
.el-table .cell{
    text-align: center;
}

 .el-pagination {
      text-align: center;
 }

</style>